<template>
	<view class="container">

		<view class="intro">光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<!-- 		<uni-link :href="href" :text="href"></uni-link> -->

		<button size="mini" class="btn" :disabled="false" hover-start-time=20>按钮</button>
		<button size="mini" class="btn" @click="onclick">显示toast</button>
		<button @click="say('内联按钮')" size="mini">内联按钮</button>

		<scroll-view class="scroll" scroll-x="true" scroll-y="true">
			<view class="group">
				<view class="item">
					111
				</view>
				<view class="item">
					222
				</view>
				<view class="item">
					333
				</view>
			</view>
		</scroll-view>


		---v-for-----
		<view class="out" v-for="(item,index) in arr" :key="item">
			<view class="row">{{(index+1+"-"+item)}}</view>
		</view>

		<view class="goods" v-for="(item,index) in goods" :key="item.id">
			<view class="row">{{index+1}}商品名称：{{item.title}},价格：{{item.price}}</view>
		</view>
		-------遍历对象属性-------
		<view>
			<view v-for="(value,name,index) in obj">
				<view>{{index}}-{{name}}:{{value}}</view>
			</view>
		</view>
		
		---------vHtml---------------------
		<view>{{htmle}}</view>
		换一种写法
		<view v-html="htmle"></view>
		<view style="display: flex;">
			<image :src="'/static/c'+index+'.png'" v-for="index in [1,2,3,4,5,6]"></image>
		</view>
	</view>
</template>

<script>
	//import { bool } from 'prop-types'
	export default {
		data() {
			return {
				title:"打印机dd",
				htmle:"<h1>打印机</h1><em>好打印机</em>",
				//href: 'https://uniapp.dcloud.io/component/README?id=uniui'
				name: 'vue.js',
				arr: ["aaa", "bbb", 1, 2, false, true],
				obj: {
					name: "张三",
					age: 22
				},
				goods: [{
					id:0,
					title: "订单1",
					price: 1.1
				}, {
					id:1,
					title: "订单2",
					price: 1.1
				}]
			}
		},
		methods: {
			onclick(event) {
				console.log('event')
				uni.showToast({
					title: '警告' + this.name + '!'
				})
			},
			say(message) {
				uni.showToast({
					title: message
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.btn {
		/* line-height: 28px; */
		margin-left: 10px;
		margin-right: 10px;
	}

	.scroll {
		border: 1rpx solid red;
		height: 100rpx;
		box-sizing: border-box;

		.group {
			white-space: nowrap;

			.item {
				width: 220rpx;
				height: 220rpx;
				background: royalblue;
				display: inline-block;
				margin: 10rpx;
			}
		}
	}

	.out {
		.row {
			color: red;
			border: 1rpx solid #ccc
		}
	}

	.goods {
		.row {
			font-size: 36rpx;
			color: blue;
			background-color: #fff;
		}
	}
</style>